<template>
  <view class="course-container">
    <!-- 顶部周数和切换 -->
    <view class="header">
      <view class="week-title">第 {{ currentWeek }} 周</view>
      <view class="week-switcher">
        <button class="switch-btn" @click="prevWeek">上一周</button>
        <button class="switch-btn" @click="nextWeek">下一周</button>
      </view>
    </view>

    <!-- 课程表主体 -->
    <view class="timetable">
      <!-- 表头 -->
      <view class="table-header">
        <view class="time-col">节</view>
        <view
          v-for="day in weekDays"
          :key="day"
          class="day-col"
          :class="{ 'current-day': isCurrentDay(day) }"
        >
          {{ day }}
        </view>
      </view>

      <!-- 课程网格 -->
      <view class="table-content">
        <!-- 时间列 -->
        <view class="time-column">
          <view
            v-for="(time, index) in timeSlots"
            :key="index"
            class="time-cell"
          >
            <view class="time-label">{{ index + 1 }}</view>
          </view>
        </view>

        <!-- 课程区域 -->
        <view class="course-area">
          <view
            v-for="course in displayCourses"
            :key="course.id"
            class="course-card"
            :style="{
              backgroundColor: course.backgroundColor,
              gridRow: `${course.row} / span ${course.rowSpan}`,
              gridColumn: `${course.column} / span 1`,
            }"
            @click="showCourseDetail(course)"
          >
            <text class="course-name">{{ course.name }}</text>
            <text class="course-teacher">{{ course.teacher }}</text>
            <text class="course-location">{{ course.location }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { courseData, weekDays, timeSlots } from '@/static/course'

const currentWeek = ref(1)
const currentDay = new Date().getDay() // 0是周日，1-6是周一到周六

const prevWeek = () => {
  if (currentWeek.value > 1) currentWeek.value--
}

const nextWeek = () => {
  if (currentWeek.value < 20) currentWeek.value++
}

const isCurrentDay = (day) => {
  const dayIndex = weekDays.indexOf(day) + 1
  return dayIndex === currentDay
}

const showCourseDetail = (course) => {
  uni.showModal({
    title: course.name,
    content: `教师：${course.teacher}\n地点：${course.location}\n时间：${course.startTime}-${course.endTime}`,
    showCancel: false,
  })
}

// 添加计算属性来处理课程显示
const displayCourses = computed(() => {
  const courses = []
  courseData.forEach((dayData) => {
    dayData.courses.forEach((course) => {
      // 直接使用 weekday 作为列位置
      const column = dayData.weekday
      const row = getRowByTime(course.startTime)
      const rowSpan = getRowSpan(course.startTime, course.endTime)

      courses.push({
        ...course,
        column,
        row,
        rowSpan,
        id: `${dayData.weekday}-${course.startTime}`,
      })
    })
  })
  return courses
})

// 根据开始时间计算行数
const getRowByTime = (startTime) => {
  const timeIndex = timeSlots.findIndex((slot) => slot.includes(startTime))
  return timeIndex + 1 // 网格行从1开始
}

// 计算课程跨越的行数
const getRowSpan = (startTime, endTime) => {
  const startIndex = timeSlots.findIndex((slot) => slot.includes(startTime))
  const endIndex = timeSlots.findIndex((slot) => slot.includes(endTime))
  return endIndex - startIndex + 1
}

// 添加时间处函数
const getTimeRange = (timeSlot) => {
  return timeSlot.split(' ')[1]
}

// 其他逻辑...
</script>

<style lang="scss" scoped>
.course-container {
  background-color: #fff;
  min-height: 100vh;
  padding: 0 20rpx;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .week-title {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    margin-bottom: 16rpx;
    font-weight: normal;
  }

  .week-switcher {
    display: flex;
    gap: 20rpx;
    padding: 0 20rpx;

    .switch-btn {
      flex: 1;
      background-color: #007aff;
      color: #fff;
      border-radius: 8rpx;
      font-size: 24rpx;
      padding: 16rpx 0;
      border: none;
      transition: opacity 0.2s ease;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

.timetable {
  .table-header {
    display: flex;
    border-bottom: 1rpx solid #eee;

    .time-col,
    .day-col {
      flex: 1;
      text-align: center;
      padding: 16rpx 0;
      font-size: 24rpx;
      color: #666;
    }

    .time-col {
      width: 40rpx;
      flex: none;
    }

    .current-day {
      color: #007aff;
      font-weight: bold;
    }
  }
}

.table-content {
  display: flex;

  .time-column {
    width: 40rpx;
    flex: none;

    .time-cell {
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1rpx solid #f5f5f5;

      .time-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.course-area {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(8, 120rpx);
  position: relative;
  gap: 1rpx;
}

.course-card {
  margin: 1rpx;
  padding: 8rpx;
  border-radius: 6rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;

  .course-name {
    font-weight: 500;
    margin-bottom: 4rpx;
    font-size: 20rpx;
  }

  .course-teacher {
    color: #666;
    margin-bottom: 2rpx;
    font-size: 18rpx;
  }

  .course-location {
    color: #666;
    font-size: 18rpx;
  }
}
</style>
